<template>
	<view>
        <view class="tag-title">基本用法</view>
        <view class="tag-item">
            <jk-tag>标签一</jk-tag>
        </view>
        
        <view class="tag-title">设置type属性</view>
        <view class="tag-item">
            <jk-tag  type="primary">主要</jk-tag>
            <jk-tag  type="success">成功</jk-tag>
            <jk-tag  type="warning">警告</jk-tag>
            <jk-tag  type="error">错误</jk-tag>
            <jk-tag  type="info">提示</jk-tag>
        </view>
        
        <view class="tag-title">主题</view>
        <view class="tag-item">
            <view class="mb-10">
                <text class="mr-10">Dark</text>
                
                <jk-tag  type="primary" theme="dark">主要</jk-tag>
                <jk-tag  type="success" theme="dark">成功</jk-tag>
                <jk-tag  type="warning" theme="dark">警告</jk-tag>
                <jk-tag  type="error" theme="dark">错误</jk-tag>
                <jk-tag  type="info" theme="dark">提示</jk-tag>
            </view>
            <view>
                <text class="mr-10">Plain</text>
                <jk-tag  type="primary" theme="plain">主要</jk-tag>
                <jk-tag  type="success" theme="plain">成功</jk-tag>
                <jk-tag  type="warning" theme="plain">警告</jk-tag>
                <jk-tag  type="error" theme="plain">错误</jk-tag>
                <jk-tag  type="info" theme="plain">提示</jk-tag>
            </view>
            
        </view>
        
        <!-- <view>多个标签</view>
        <view>
            <jk-tag v-for="item in tags" :key="item.name" :color="item.color">{{item.color}}123</jk-tag>
        </view> -->

        
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oneChecked : false,
                tags : [
                    {
                        name : '标签一',
                        checked : false,
                        color : 'default'
                    },
                    {
                        name : '标签二',
                        checked : false,
                        color : 'red'
                    },
                    {
                        name : '标签三',
                        checked : true,
                        color : 'blue'
                    },
                    {
                        name : '标签4️',
                        checked : true,
                        color : 'green'
                    }
                ]
			};
		},
        methods: {
            oneChange(event){
                console.log(event.detail.checked)
                
            },
            onChange(event){
                const detail = event.detail;
                console.log(detail)
                
            }
        },
	}
</script>

<style>
view{
    font-size: 28upx;
}
.tag-title{
    padding: 0 20upx;
    line-height: 2em;
}
.tag-item{
    padding: 20upx;
}
</style>
